import React, { PureComponent, memo } from 'react';


const MemoHeader = memo(
  function Header() {
    console.log("Header被调用");

    return (
      <h2>我是Header组件</h2>
    )
  }
)



class Banner extends PureComponent {
  render() {
    console.log("Banner 的render函数被调用");

    return (
      <h2>我是Banner组件</h2>
    );
  }
}


const MemoProductList = memo(
  function ProductList() {
    console.log("ProductList被调用");
    return (
      <div>
        <ul>
          <li>商品列表1</li>
          <li>商品列表2</li>
          <li>商品列表3</li>
          <li>商品列表4</li>
          <li>商品列表5</li>
        </ul>
      </div>
    )
  }
)

class Main extends PureComponent {
  render() {
    console.log("Main render 函数被调用");
    return (
      <div>
        <Banner></Banner>
        <MemoProductList></MemoProductList>
      </div>
    );
  }
}

const MemoFooter = memo(
  function Footer() {
    console.log("Footer 被调用");

    return (
      <h2>我是Footer组件</h2>
    )
  }
)



class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      count: 0,
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数：{this.state.count}</h2>
        <button onClick={e => { this.changeCount() }}>+1</button>
        <MemoHeader></MemoHeader>
        <Main></Main>
        <MemoFooter></MemoFooter>
      </div>
    );
  }
  changeCount() {
    this.setState({
      count: this.state.count + 1
    })

  }
}


export default App;